<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.min.js"></script>
<div id="app">
    动态切换：
    <button @click="toshow">点击让子组件显示</button>
    <br>
    <pr>
    在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名
    </pr>
    <br>
    <component v-bind:is="which_to_show" :getdata="which_to_show"></component>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toshow: function () {   //切换组件显示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 3) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
            }
        },
        components: {
            first: { //第一个子组件
                template: "<div>这里是子组件1</div>",
                props: {getdata: {required: true}, jsondata: {default: "我是默认值！"}},
                mounted:function(){console.log("我是组件1"+this.getdata)}
            },
            second: { //第二个子组件
                template: "<div>这里是子组件2</div>",
                props: {getdata: {required: true}, jsondata: {default: "我是默认值！"}}, //设置默认值
                mounted:function(){console.log("我是组件2"+this.getdata)}
            },
            third: { //第三个子组件
                template: "<div>这里是子组件3</div>",
                props: {getdata: {required: true}, jsondata: {default: "我是默认值！"}}, //设置默认值
                mounted:function(){console.log("我是组件3"+this.getdata)}
            }
        }
    });
</script>
</body>
</html>